<template>
	<view class="content">
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="83" @refresh="onPulldownReresh" @setEnableScroll="setEnableScroll">
			<scroll-view class="panel-scroll-box" :scroll-y="true" @scrolltolower="loadMore" :scroll-top="scrollTop" :style="{height: 'calc(100% - ' + pageTop + 'px)'}">
				<view class="record">
				<!-- 			<view class="datetime">
								<text>星期六 11:56</text>
							</view> -->
							<!-- <view class="question_card">
								<view class="prompt">以下为自动回复，请点击：</view>
								<block v-for="(item,index) in listarr" :key="index">
									<view class="prompt blue" @click="quxian">{{index+1}}、{{item.name}}</view>
								</block>
								<view class="prompt">如需专业服务，请选择专家在线咨询</view>
								<view class="button" @click="xuanzzj">选择专家</view>
							</view> -->
							<view class="question_card" v-show="yyYuyue_listshow">
								<view class="prompt">以下为自动回复，请点击：</view>
								<block v-for="(item,index) in yyYuyue_list_arr" :key="index">
									<view class="prompt blue" @click="tianbiao(item.id)">{{index+1}}、{{item.name}}</view>
								</block>
								<view class="prompt">如需专业服务，请选择专家在线咨询</view>
								<view class="button" @click="xuanzzj">选择专家</view>
							</view>
							<view class="question_card" v-show="yyYuyue_listshow">
								<view class="prompt">以下为自动回复，请输入：</view>
								<view class="name">
									<input type="text" value="" placeholder="请输入姓名"/>
								</view>
								<view class="tel">
									<input type="text" value="" placeholder="请输入电话"/>
								</view>
								<view class="time">
									<input type="time" value="" placeholder="请选择时间"/>
								</view>
								<button type="primary">确定</button>
								<!-- <block v-for="(item,index) in yyYuyue_list_arr" :key="index">
									<view class="prompt blue" @click="tianbiao(item.id)">{{index+1}}、{{item.name}}</view>
								</block> -->
								<view class="prompt">如需专业服务，请选择专家在线咨询</view>
								<view class="button" @click="xuanzzj">选择专家</view>
							</view>
							<!-- <view class="selbox left_t">
								<view class="touxiang"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"></image></view>
								<view class="selbox_text">您好，我是电力专家汪大海， 请问您有什么问题？</view>
							</view>
							<view class="selbox right_t">
								<view class="selbox_text">您好，</view>
								<view class="touxiang"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"></image></view>
							</view> -->
							<view v-for="(item,index) in msglist" :key = 'index'>
								<view class="selbox left_t" v-if="item.object == 'robot'">
									<view class="touxiang"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"></image></view>
									<view class="selbox_text">
										<text v-if="item.type == 'text' ">{{item.data}}</text>
										<view class="question_card" v-else-if="item.type=='obj'">
											<view class="prompt">看看这些内容对您有帮助吗？</view>
											<block v-for="(item1,index1) in item.data" :key="index1">
												<view class="prompt blue" @click="autoAnswerafter(index,index1)">{{index1+1}}、{{item1.question}}</view>
											</block>
											<view class="prompt">都是不是？</view>
											<view class="button" @click="xuanzzj">选择专家</view>
										</view>
									</view>
								</view>
								<view class="selbox right_t" v-else-if="item.object == 'oneself'">
									<view class="selbox_text">{{item.data}}</view>
									<view class="touxiang">
											<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"></image>
									</view>
								</view>
							</view>
							
							
							<view id='gundong' style='height:1px;width:100%'></view>
						</view>
			</scroll-view>
		</mix-pulldown-refresh>
		<view class="input_bottom">
			<view class="input_bottom_box">
				<input type="text" value="" v-model="mytxt"/>
				<!-- <image class="expression" src="../../static/icon_smile.png" mode=""></image> -->
			</view>
			<view class="more" @click="autoAnswer">
				<button type="primary" size="mini">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '../../common/api.js';
	import jim from '../../app.js';
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	export default {
			components: {
				mixPulldownRefresh
			},
			onHide() {
				// #ifdef APP-PLUS
				/* 隐藏凸起图标 */
				var icon = plus.nativeObj.View.getViewById("icon");
				setTimeout(function() {
					if(icon){icon.hide();}
				}, 100);
				// #endif
			},
			onShow() {
				// #ifdef APP-PLUS
				var icon = plus.nativeObj.View.getViewById("icon");
				setTimeout(function() {
					if(icon){icon.show();}
				}, 100);
				// #endif
			},
			data() {
				return {
					baseURL:API.baseURL,
					listarr:[],
					yyYuyue_list_arr:[],
					yyYuyue_listshow:false,
					
					
					pageTop:uni.upx2px(0),
					scrollTop:0,
					oldbottom:'0',
					msglist:[], //消息列表
					mytxt:''//用户发送的消息
				}
			},
			onLoad: function() {
				// this.list();
				this.msglist.push({object:'robot',data:'智能助手为您服务，请您简述您的疑问',type:'text'})
			},
			mounted(){
				uni.createSelectorQuery().select("#gundong").boundingClientRect((res)=>{
					this.oldbottom = res.bottom  // 记录 滚动 元素的 bottom 值
				}).exec();
			},
			updated(){
					uni.createSelectorQuery().select("#gundong").boundingClientRect((res)=>{
					var newbottom = res.bottom
					if(Number(newbottom) > Number(this.oldbottom)){
							this.scrollTop = newbottom
						}
					 this.oldbottom = newbottom
				}).exec();
			},
			methods: {
				//下拉刷新
				onPulldownReresh(){
					// console.log('onPulldownReresh')
				},
				//上滑加载
				loadMore(){
					// console.log('loadMore')
				},
				//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
				setEnableScroll(enable){
					// if(this.enableScroll !== enable){
					// 	this.enableScroll = enable;
					// }
				},
				xuanzzj(){
					uni.navigateTo({
						url: 'ChooseExpert',
					});
				},
				tianbiao(id){
					uni.navigateTo({
						url: 'ChooseExpert',
					});
				},
				quxian(id){
					var _this = this;
					uni.request({
						url:API.yyYuyue_list,
						method:"GET",
						header:API.get_head(),
						success: (res) => {
							_this.yyYuyue_list_arr = res.data.rows;
							_this.yyYuyue_listshow = true;
						},
						fail: () => {
							uni.showToast({
								title:"加载失败",
								icon:'none'
							})
						}
					})
				},
				list(){
					var _this = this;
					uni.request({
						url:API.yyCart_list,
						method:"GET",
						header:API.get_head(),
						success: (res) => {
							_this.listarr=res.data.rows;
						},
						fail: () => {
							uni.showToast({
								title:"加载失败",
								icon:'none'
							})
						}
					})
				},
				//获取机器人回答获取本地之后的答案
				autoAnswerafter(order,subscript){
					this.msglist.push({object:'robot',data:this.msglist[order].data[subscript].anwser,type:'text'})
				},
				//获取机器人回答的接口
				autoAnswer(){
					var _this = this;
					if(!this.mytxt){
						return false
					}
					_this.msglist.push({object:'oneself',data:this.mytxt,type:'text'})
					uni.request({
						url:API.autoAnswer,
						method:"POST",
						data:{
							question:this.mytxt
						},
						header:API.get_head(),
						success: (res) => {
							_this.msglist.push({object:'robot',data:res.data.data,type:'obj'})
						},
						fail: () => {
							uni.showToast({
								title:"加载失败",
								icon:'none'
							})
						},
						complete : ()=>{
							this.mytxt = ''
						}
					})
				}
				
		},
	}
</script>

<style>
	.content{
		height:100%;
		padding:0 25upx;
		position:relative;
	}
	.record{
		/* padding-bottom:98upx; */
	}
	.input_bottom{
		height:68upx;	
		background:#FFFFFF;
		position:fixed;
		bottom:0;
		left:0;
		width:100%;
		display:flex;
		padding:15upx 25upx;
	}
	.input_bottom input{
		width:490upx;
		height:68upx;
		border:1upx solid #e8e8e8;
		border-radius:34upx;
		background:#f4f4f5;
		padding-left:20upx;
		padding-right:90upx;
	}
	.input_bottom>.more>button{
		width: 90rpx;
		height: 54rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
		font-size: 24rpx;
		padding: 0;
		line-height: 2.2;
		color: #fff;
	}
	.input_bottom_box{
		position:relative;
	}
	.input_bottom_box .expression{
		position:absolute;
		width:40upx;
		height:40upx;
		right:40upx;
		top:16upx;
	}
	.datetime{
		text-align: center;
		padding:40upx 0;
	}
	.datetime text{
		padding:10upx 17upx;
		background:#c9c9c9;
		color:#FFFFFF;
		display:inline-block;
		border-radius:12upx;
		line-height:1;
		font-size:24upx;
	}
	.question_card{
		/* width:628upx; */
		/* padding:36upx; */
		padding:0;
		border-radius:10upx;
		font-size:32upx;
		background:#FFF;
		/* margin-bottom:45upx; */
		
	}
	.prompt{
		color:#333333;
		line-height:1;
		margin-bottom:25upx;
	}
	.blue{
		color:#3895f1;
	}
	.question_card .button{
		width:200upx;
		height: 60upx;
		margin:0 auto;
		text-align: center;
		line-height: 60upx;
		color:#FFFFFF;
		font-size:32upx;
		background:#067aee;
		border-radius:30upx;
	}
	.selbox{
		position:relative;
		margin-bottom:45upx;
	}
	.selbox .touxiang{
		display:inline-block;
		position:absolute;
		top:0;
	}
	.selbox .touxiang image{
		width:80upx;
		height:80upx;
		border-radius:50%;
	}
	.selbox .selbox_text{
		display:inline-block;
		max-width:420upx;
		color:#333333;
		font-size:32upx;
		padding:25upx 35upx;
		margin-left:95upx;
		margin-top:30upx;
		background:#FFFFFF;
		border-radius:10upx;
	}
	.right_t{
		overflow:hidden;
	}
	.right_t .touxiang{
		float: right;
		right:0;
	}
	.right_t .touxiang image{
		margin-left:0upx !important;
	}
	.right_t .selbox_text{
		float: right;
		margin-left:0;
		margin-right:95upx;
		margin-top:30upx;
	}
</style>
